<template>
  <view class="mePage">
    <scroll-view scroll-y class="scrollPage">
      <view class="loginGuide">
        <image class="img-a" src="@/static/head.png"></image>
        <view class="text" @click="nameFn">
          {{ $token ? $userInfo.name : "登录/注册" }}</view
        >
      </view>
      <view class="equipment">
        <view class="item" v-if="$token">
          <view class="label">账号</view>
          <view class="value">{{ $userInfo.account }}</view>
        </view>

        <button class="item buttonItem" open-type="feedback">
          <view class="label">意见反馈</view>
          <u-icon
            class="value"
            name="arrow-right"
            color="#999999"
            size="20"></u-icon>
        </button>
        <button class="item buttonItem" open-type="contact">
          <view class="label">联系客服</view>
          <u-icon
            class="value"
            name="arrow-right"
            color="#999999"
            size="20"></u-icon>
        </button>
        <view class="item">
          <view class="label" @click="regardTo">关于</view>
          <u-icon
            class="value"
            name="arrow-right"
            color="#999999"
            size="20"></u-icon>
        </view>
        <view v-if="$token" class="item delText" @click="outFn">
          <view>退出登录</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["$userInfo", "$token"]),
  },
  methods: {
    ...mapMutations(["setUserInfo", "setToken"]),
    nameFn() {
      if (!this.$token) {
        this.outFn();
      }
    },
    outFn() {
      this.setUserInfo(null);
      this.setToken(null);
      uni.clearStorageSync();
      uni.reLaunch({
        url: "/pages/modules/home/index",
      });
    },
    regardTo() {
      uni.navigateTo({
        url: "/pages/modules/flow/regardTo",
      });
    },
  },
};
</script>

<style lang="scss">
.mePage {
  height: 100vh;
  background-color: #f0eff4;
  .loginGuide {
    padding: 100rpx 20rpx;
    text-align: center;
    background: linear-gradient(to bottom, #0fb6fa, #4285ec);
  }
  .loginGuide image {
    display: inline-block;
    width: 200rpx;
    height: 200rpx;
  }
  .loginGuide .text {
    font-size: 34rpx;
    color: #fff;
    text-align: center;
    padding-top: 30rpx;
  }
  .equipment {
    padding: 0 0 40rpx 0;
    background: #efefef;
    margin: auto;
  }
  .equipment .item {
    height: 78rpx;
    line-height: 78rpx;
    background: #fff;
    border-bottom: 1rpx solid #efeff3;
    padding: 0 20rpx;
    display: flex;
    font-size: 34rpx;
  }
  .item .label {
    flex: 1;
    color: #000000;
    font-size: 28rpx;
  }
  .item .value {
    color: #c7c7cb;
    font-size: 28rpx;
  }
  .delText {
    margin-top: 100rpx;
    text-align: center;
  }
  .delText view {
    color: #ff0000;
    flex: 1;
  }
  .buttonItem {
    .label {
      text-align: left;
    }
  }
  button::after {
    border: 0px solid #000 !important;
  }
}
</style>
